import React,{ Component } from 'react';
import { Form, Input, Icon, Button,Select } from 'antd';
import Inputs from '../../components/inputs/inputs';
const FormItem = Form.Item;
const Option = Select.Option;
let uuid = 0;
class Add extends Component {
	constructor(props) {
		super(props);
		this.state = {

		}
	}
	/*
	 *  addEvent()添加组件
	 */
	addEvent() {
		console.log('添加！');
		const { form } = this.props;
		const keys = form.getFieldValue('keys');
		const nextKeys = keys.concat(uuid);
		uuid++;
		form.setFieldsValue({
			keys: nextKeys,
		})
	}
	handleSubmit(e) {
		e.preventDefault();
		console.log('提交');
	}
	/*删除*/
	remove=(k)=>{
		console.log('删除');
		const { form } = this.props;
		const keys = form.getFieldValue('keys');
		if(keys.length === 1){
			console.log('等于1');
			return;
		}
		form.setFieldsValue({
			keys: keys.filter(key=> key!==k)
		})
	}
	handleChange() {

	}
	render() {
		const { getFieldDecorator, getFieldValue } = this.props.form;
		getFieldDecorator('keys',{ initialValue: [] });
		const keys = getFieldValue('keys');
		const formItems = keys.map((k,index)=>{
			return (
				<FormItem
					key={ k }
					required = { false }
				>
					{
						getFieldDecorator(`names[${k}]`,{
							validateTrigger: ['onBlur','onChange']
						})(
							<Select defaultValue="lucy" style={{ width: 120 }} onChange={this.handleChange}>
						      	<Option value="jack">Jack</Option>
						      	<Option value="lucy">Lucy</Option>
						      	<Option value="disabled">disabled</Option>
						      	<Option value="Yiminghe">yiminghe</Option>
						    </Select>
						)
					}
					{
						keys.length>1 ? (
							<Icon
								className="dynamic-delete-button"
								type="minus-circle-o"
								disabled = { keys.length === 1}
								onClick={ ()=>this.remove(k) }
							/>
						): null
					}
				</FormItem>
			)
		})
		return (
			<Form onSubmit={ this.handleSubmit.bind(this)}>

				<FormItem style={{ width: '60%'}}>
					{ formItems }
					<Button type="dashed" onClick={ this.addEvent.bind(this)} >
						<Icon type="plus" />添加
					</Button>
				</FormItem>
				<FormItem>
					<Button type="primary" htmlType="submit">
						提交
					</Button>
				</FormItem>
			</Form>
		)
	}
}
export default Add=Form.create({})(Add);